<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>医院管理平台 – 医生端</title>
    <style>
        body{font-family:Arial,sans-serif;margin:0;padding:0;background:#f5f7fa;color:#333;}
        header{background:#2c3e50;color:#fff;padding:20px;text-align:center;}
        nav{display:flex;justify-content:center;background:#34495e;}
        nav a{color:#ecf0f1;padding:12px 20px;text-decoration:none;}
        nav a:hover{background:#1abc9c;}
        .container{max-width:1200px;margin:auto;padding:20px;}
        .card{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:20px 0;padding:20px;}
        .btn{background:#1abc9c;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;}
        .btn:hover{background:#16a085;}
        input,select,textarea{width:100%;padding:8px;margin-top:5px;border:1px solid #ccc;border-radius:4px;}
        .patient-list{margin-top:15px;}
        .patient-item{border-bottom:1px solid #eee;padding:8px 0;}
        .img-preview{max-width:100%;margin-top:10px;border-radius:4px;}
    </style>
</head>
<body>

<header>
    <h1>医院管理平台 – 医生端</h1>
</header>

<nav>
    <a href="index.html">← 返回主页面</a>
</nav>

<div class="container">

    <!-- 添加患者 -->
    <section class="card">
        <h2>添加患者</h2>
        <form id="patientForm">
            <label>患者姓名</label>
            <input type="text" id="pName" required>
            <label>年龄</label>
            <input type="number" id="pAge" min="0" required>
            <label>性别</label>
            <select id="pGender"><option value="男">男</option><option value="女">女</option></select>
            <label>疾病描述（可选）</label>
            <textarea id="pDesc" rows="2"></textarea>
            <button type="submit" class="btn">保存患者</button>
        </form>
    </section>

    <!-- 患者列表 -->
    <section class="card">
        <h2>患者列表</h2>
        <div class="patient-list" id="patientList"></div>
    </section>

    <!-- 患者详情 -->
    <section class="card" id="detailSection" style="display:none;">
        <h2>患者详情</h2>
        <p><strong>姓名：</strong><span id="detailName"></span></p>
        <p><strong>年龄：</strong><span id="detailAge"></span></p>
        <p><strong>性别：</strong><span id="detailGender"></span></p>
        <p><strong>疾病描述：</strong><span id="detailDesc"></span></p>

        <label>上传疾病相关图片</label>
        <input type="file" id="imgUpload" accept="image/*">
        <img id="imgPreview" class="img-preview" src="" alt="疾病图片预览">

        <h3>睡眠数据可视化（示例）</h3>
        <canvas id="sleepChart" width="700" height="250"></canvas>
    </section>

</div>

<script>
let patients=[];

/* 刷新患者列表 */
function refreshList(){
    const list=document.getElementById('patientList');
    list.innerHTML='';
    patients.forEach((p,i)=>{
        const div=document.createElement('div');
        div.className='patient-item';
        div.innerHTML=`<span>${p.name}（${p.age}岁）</span>
            <button class="btn" style="margin-left:10px;" onclick="showDetail(${i})">查看</button>`;
        list.appendChild(div);
    });
}

/* 添加患者 */
document.getElementById('patientForm').addEventListener('submit',e=>{
    e.preventDefault();
    const name=document.getElementById('pName').value.trim();
    const age=document.getElementById('pAge').value;
    const gender=document.getElementById('pGender').value;
    const desc=document.getElementById('pDesc').value.trim();
    if(name && age){
        patients.push({name,age,gender,desc});
        refreshList();
        e.target.reset();
    }
});

/* 显示患者详情 */
function showDetail(idx){
    const p=patients[idx];
    document.getElementById('detailName').textContent=p.name;
    document.getElementById('detailAge').textContent=p.age;
    document.getElementById('detailGender').textContent=p.gender;
    document.getElementById('detailDesc').textContent=p.desc||'暂无';
    document.getElementById('detailSection').style.display='block';
    drawSleepChart('sleepChart');
}

/* 图片预览 */
document.getElementById('imgUpload').addEventListener('change',e=>{
    const file=e.target.files[0];
    if(file){
        const url=URL.createObjectURL(file);
        document.getElementById('imgPreview').src=url;
    }
});

/* 睡眠曲线（示例） */
function drawSleepChart(id){
    const c=document.getElementById(id);
    const ctx=c.getContext('2d');
    const w=c.width, h=c.height;
    ctx.fillStyle='#f9f9f9';ctx.fillRect(0,0,w,h);
    ctx.strokeStyle='#bbb';
    ctx.beginPath();ctx.moveTo(40,h-30);ctx.lineTo(w-20,h-30);ctx.stroke();
    ctx.beginPath();ctx.moveTo(40,20);ctx.lineTo(40,h-30);ctx.stroke();
    const pts=[];
    for(let i=0;i<=48;i++){
        const hour=i*0.5;
        const depth=Math.max(0,Math.sin((hour-22)/24*Math.PI*2)*80+20+(Math.random()*10-5));
        pts.push({x:40+(w-60)*(hour/24), y:h-30-(h-50)*(depth/100)});
    }
    ctx.strokeStyle='#1abc9c';ctx.lineWidth=2;ctx.beginPath();
    pts.forEach((p,i)=>i===0?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y));
    ctx.stroke();
    ctx.fillStyle='#333';ctx.font='12px Arial';
    for(let hrt=0;hrt<=24;hrt+=4){
        const x=40+(w-60)*(hrt/24);
        ctx.fillText(hrt+'h',x-10,h-10);
        ctx.beginPath();ctx.moveTo(x,h-30);ctx.lineTo(x,h-25);ctx.stroke();
    }
}
</script>

</body>
</html>
